Design "Your Maroon"

Design in Rotwein Farbe

Design:	Your Maroon
Kategorie:	CSS Profi / HPBK
Aktuelle Version:	1.0
Erscheinung:	18.Juli 2010
Getestet auf:	»Firefox »MSIE »Google Chrome »Safari

 

Die Designcodes

Text über dem Design

<div id="ym_design">
<h1 id="heading">Homepage Titel</h1>
<h2 id="slogan">Hier kann dein Slogan stehen...!</h2>
<div id="top_shadow"><a href="G.ae.stebuch.htm">Gästebuch</a> - <a href="Kontakt.htm">Kontakt</a> - <a href="Impressum.htm">Impressum</a></div>

Text unter dem Design

<div id="bottom_shadow"></div>
<div id="copyright">©Copyright 2010 by Deine-Homepage.de.tl.  -  Design by <a href="http://www.poddi.de.tl" target="_blank">Poddi.de.tl</a></div>
</div>

 

CSS Code ohne Style-Tags

           /* Your Maroon - Copyright by www.Poddi.de.tl */

    /*VERSTECKT*/

#header_container{display:none;}
h2#title{display:none;}
#counter{display:none;}

    /*VERSTECKT ENDE*/



    /*HINTERGRUND*/

body{
    background-image: url(https://img.webme.com/pic/p/poddi-designs/ym_bg.png);
    background-color: #ececec;
    background-repeat: repeat-x;
    font-family: arial, sans-serif;
    font-size: 12px;
    }

    /*HINTERGRUND ENDE*/

   

    /*FORMATIERUNGEN*/

h1{
    color: #a01213;
    font-size: 17px;
    margin: 0px;
    }

h2{
    color: #610303;
    font-size: 13px;
    margin-bottom: 2px;
    margin-top: 2px;
    }

a{
    color: #a01213;
    font-style: italic;
    text-decoration: none;
    }
   
a:hover{
    color: #610303;
    }
   
hr{
    height: 1px;
    border: 0px solid #e0e0e0;
    background-color: #e0e0e0;
    margin: 5px;
    margin-left: 0px;
    margin-right: 0px;}
           
    /*FORMATIERUNGEN ENDE*/



    /*DESIGNCONTAINER*/

#ym_design{
    width: 980px;
    margin: 20px auto;
    background: transparent;
    }       
   
#container{
    width: 980px;
    float: left;
    background: url(https://img.webme.com/pic/p/poddi-designs/ym_main.png);
    background-repeat: repeat-y;
    }
   
    /*DESIGNCONTAINER ENDE*/   
   
   
   
    /*HEADER*/

#heading{
    margin-left: 200px;
    color: #fff;
    font-size: 30px;
    }

#slogan{
    margin-left: 270px;
    font-size: 20px;
    }

    /*HEADER ENDE*/

   

    /*TOPBEREICH*/   

#top_shadow{
    width: 950px;
    height: 15px;
    float: left;
    background-image: url(https://img.webme.com/pic/p/poddi-designs/ym_top_shadow.png);
    text-align: right;
    padding-right: 30px;
    color: #fff;
    }

#top_shadow a{
    color: #fff;
    }
   
    /*TOPBEREICH ENDE*/



    /*NAVIGATION*/

#nav_container{
    background: transparent;
    width: 256px;
    padding-left: 9px;
    float: left;
    }

#nav_heading{
    height: 28px;
    width: 196px;
    padding-left: 40px;
    padding-top: 7px;
    float: right;
    color: #a01213;
    font-size: 140%;
    margin-top: 15px;
    margn-bottom: 15px;
    background: url(https://img.webme.com/pic/p/poddi-designs/ym_side_head.png);
    }

ul#nav{
    margin-top: 60px;
    }

li.nav_element{
    list-style-type: square;
    color: #831111;
    }
li.subpage a{
    width: 170px;
    margin-left: 20px;
    font-style: italic;
    }

li.subpage a:before{
    content: "» ";
    }

li.checked_menu a{
    background-color: #a01213;
    font-weight: bold;
    }

li.checked_menu a:hover{
    background-color: #a01213;
    font-weight: bold;
    }
   
a.menu{
    display:block;
    width: 190px;
    height: 20px;
    color: #fff;
    text-decoration: none;
    padding-left: 10px;
    padding-top: 4px;
    border-bottom: 1px solid #7e3232;
    }

a.menu:hover{
    background-color: #831111;
    }

    /*NAVIGATION ENDE*/



    /*INHALTSBEREICH*/

#content{
    width: 630px;
    padding: 10px 50px 35px 35px;
    float: right;
    color: #333333;
    }

#pre_content{
    background-image: url(https://img.webme.com/pic/p/poddi-designs/ym_content_top.png);
    background-color: #fff;
    background-repeat: repeat-x;
    float: left;
    width: 700px;
    height: 20px;
    }

    /*INHALTSBEREICH ENDE*/



    /*SIDEBAR*/

#sidebar_container{
    background: transparent;
    width: 256px;
    padding-left: 9px;
    margin-bottom: 30px;
    float: left;
    clear:left;
    }
   
#sidebar_heading{
    height: 28px;
    width: 196px;
    padding-left: 40px;
    padding-top: 7px;
    float: right;
    color: #a01213;
    font-size: 140%;
    margin-top: 15px;
    margn-bottom: 15px;
    background: url(https://img.webme.com/pic/p/poddi-designs/ym_side_head.png);
    }
   
#sidebar_content{
    color: #fff;
    margin-top: 60px;
    padding-left: 30px;
    padding-right: 10px;
    }

#sidebar_content h2{
    color: #fff;
    }

#sidebar_content a:hover{
    color: #a01213;
    text-decoration: underline;
    }
   
#sidebar_content hr{
    height: 1px;
    border: 0px solid #7e3232;
    background-color: #7e3232;
    margin: 5px;
    margin-left: 0px;
    margin-right: 0px;}

    /*SIDEBAR ENDE*/



    /*FOOTER*/

#bottom_shadow{
    width: 980px;
    height: 15px;
    float: left;
    background-image: url(https://img.webme.com/pic/p/poddi-designs/ym_bottom_shadow.png);
    }

#copyright{
    color: #6b6b6b;
    text-align: center;
    width: 980px;
    float: left;
    }

    /*FOOTER ENDE*/



    /*WERBUNG ZENTRIEREN*/

table[height="102"] {
    margin:auto;
    }

    /*WERBUNG ZENTRIEREN ENDE*/

 

Inhalt der 1. Extra-Box (rechts)

<h2>Neues Design</h2>
<p>Hier seht ihr das neue "Your Maroon" Design von Poddi.de.tl</p>
<a href="#">weiterleesen</a>
<hr />
<h2>Neues Design</h2>
<p>Hier seht ihr das neue "Your Maroon" Design von Poddi.de.tl</p>
<a href="#">weiterleesen</a>
<hr />